<template>
  <div id="home" style="height: 1200px">
    <Sidebar></Sidebar>
    <div class="kunimage"></div>
    <SearchInput></SearchInput>
    <!-- 岗位分类 -->
    <div class="sortandimage">
      <div class="sort">
        <p class="sort-title"><b>岗位分类</b></p>
        <div class="sort-list">
          <div v-for="(jobSort, index) in currentTableData" :key="index">
            <button class="jobsort" @click="jobSortDescribe(jobSort)">
              <p style="color: rgb(73, 70, 70)">{{ jobSort.pname }}</p>
            </button>
          </div>
        </div>

        <!-- 分页组件 -->
        <div class="sort-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="carousel-container">
        <el-carousel trigger="click" height="600px" style="width: 900px">
          <el-carousel-item v-for="(image, index) in images" :key="index">
            <img :src="image" alt="Carousel Image" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
  


  <script>
import axios from "axios";
import Sidebar from "@/components/SeekerSidebar.vue";
import SearchInput from "@/components/SearchInput.vue";
export default {
  components: {
    Sidebar,
    SearchInput,
  },
  created() {
    this.getsort();
  },
  data() {
    return {
      SeekerUserData: JSON.parse(sessionStorage.getItem("SeekerUser")),
      images: ["image/轮播图1.jpg", "image/轮播图2.jpg", "image/轮播图3.jpg"],
      tableData: [], //岗位分类总数据
      currentTableData: [], // 当前页显示的数据
      total: 0, // 总数据条数
      pageSize: 11, // 每页条数
      currentPage: 1, // 当前页码
    };
  },
  methods: {
    getsort() {
      axios
        .post("http://localhost:8080/hqdx/seeker/PositionClassify")
        .then((response) => {
          // jobsort
          this.tableData = response.data.data.items;
          this.total = this.tableData.length; // 总数据条数
          this.updateCurrentTableData(); // 更新当前页的数据
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 更新当前页的数据
    updateCurrentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentTableData = this.tableData.slice(start, end);
    },
    //分页跳转
    handlePageChange(page) {
      this.currentPage = page;
      this.updateCurrentTableData();
    },
    //路由跳转，分类岗位详细
    jobSortDescribe(jobSort){
      sessionStorage.setItem('PosSortValue', JSON.stringify(jobSort));
      this.$router.push({
        name: "PosSort"
      });
    }
  },
};
</script>
  <style scoped>
.kunimage {
  border: none;
  height: 138px;
  background-image: url("/public/image/求职者首页图片1.jpeg");
  background-size: 100% 100%;
}
#home {
  background: linear-gradient(to bottom, #d1eded, white);
}
/* 轮播图容器 */
.carousel-container {
  width: 900px;
  height: 600px;
  margin-left: 5%;
  overflow: hidden; /* Hide overflow to ensure images don't spill out */
}
/* 轮播图 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure images cover the container without distortion */
}
/* 岗位分类+轮播图 */
.sortandimage {
  padding: 0;
  display: flex;
  margin-left: 10%;
  margin-top: 5%;
}
/* 岗位分类总div */
.sort {
  border: black solid 1px;
  width: 500px;
  height: 600px;
  border-color: aliceblue;
  background-color: white;
  display: grid;
  grid-template-rows: auto 1fr auto; /* 三行布局 */
  grid-template-columns: repeat(3, 1fr); /* 每行三个项目 */
  gap: 10px; /* 设置项目之间的间距 */
  padding: 10px;
  box-sizing: border-box;
}
/* 岗位分类标题 */
.sort-title {
  /* position: absolute; */
  font-size: 25px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #d1d1d1;
  grid-column: span 3; /* 使标题横跨三列 */
}
/* 岗位分类元素按钮 */
.jobsort {
  width: 100%; /* 确保职位项宽度自适应 */
  max-width: 150px; /* 最大宽度调整 */
  height: 70px;
  border: none;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  box-sizing: border-box;
}
.jobsort:hover {
  background-color: #aababa;
}
/* 岗位分类 */
.sort-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行三个项目 */
  gap: 10px; /* 行和列之间的间隔 */
  grid-column: span 3; /* 确保内容区域使用三列 */
}
/* 分页组件 */
.sort-pagination {
  display: flex;
  justify-content: flex-end; /* 分页组件右对齐 */
  grid-column: span 3; /* 确保分页组件横跨三列 */
}
</style>
  